<template>
  <my-cascader ref="myCascade"></my-cascader>
  <el-button type="primary" @click="submit()">提交</el-button>
  <div class="card-box">
    <website-card v-if="isShowCard" v-for="web in webs.web" :web="web"></website-card>
  </div>
</template>

<script lang="ts" setup>
import MyCascader from "../../components/myCascader.vue";
import WebsiteCard from "../../components/websiteCard.vue";
import {getCurrentInstance, reactive, ref} from "vue";
import {getChecked} from "../../api/website";

const currentInstance:any = getCurrentInstance();
let checkedTags:string[]=[]
let webs=reactive({
  web:[{
    name:'',
    icon:'',
    web_description:'',
    website:'',
  }]
})
const isShowCard=ref(false)
const submit = () => {
  // 获取输入框中的内容
  const checkedNodes= currentInstance.ctx.$refs['myCascade'].$refs['el-cascade'].getCheckedNodes()
  // console.log(checkedNodes)
  checkedNodes.forEach((element: any)=>{
    // console.log(element);
    checkedTags.push(element.label)
  })
  // console.log(checkedTags);

// 根据输入框中的内容请求后台数据
  getChecked(checkedTags).then(res=>{
    // console.log(res.data)
    webs.web=res.data
    isShowCard.value=true

  })
  checkedTags=[]
};
</script>

<style scoped>
.card-box{
  display: flex;
  flex-wrap: nowrap;
}
</style>
